<script setup>
  import { onMounted, ref } from 'vue'
  import { onLoad, onShow, onShareAppMessage } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'
  import { parseTime } from '@/utils/index.js'
  import infomask from './component/infomask.vue'
  import { useUsercodeStore } from '@/store/usercode.js'
  import PayBox from '../../components/PayBox.vue'
  const createOrderUrl = ref('createBoxOrder_heaven')

  const blindboxId = ref()
  const blindboxDetail = ref()
  const boxDetailInfo = ref()

  const caseId = ref(0)
  // 优惠券id
  const couponId = ref(0)
  const couponname = ref('')
  const couponType = ref(-1)

  const probality = ref('')
  //tab数据
  const items = ref(['奖池预览', '开赏记录'])
  const current = ref(0)
  // 盲盒详情
  async function getblindboxDetail() {
    const res = await http.request({
      url: '/api/box/boxDetails',
      method: 'POST',
      data: {
        id: blindboxId.value,
        case_id: caseId.value,
      },
    })

    blindboxDetail.value = res.data
    boxDetailInfo.value = res.data.box
    caseId.value = res.data.case_info.id
    const keys = ref([])
    blindboxDetail.value.box.probability_show.forEach((item) => {
      keys.value.push(`${Object.keys(item)}:${item[Object.keys(item)]}%`)
    })
    probality.value = '实时概率为：' + keys.value.join('，')
    // console.log(probality.value)
    if (res.data.box.is_cc == 1) {
      items.value = ['奖池预览', '开赏记录', '冲冲赏']
    }
  }

  //去我的奖品
  function toMyReward() {
    uni.reLaunch({
      url: '/pages/bag/index',
    })
  }
  // 开赏记录
  const prizePage = ref(1)
  const openRewardList = ref([])
  const prizeFlag = ref(true)
  async function openReward() {
    if (
      blindboxDetail.value.case_info.leftover ==
      blindboxDetail.value.case_info.sum
    ) {
      return
    }
    ccRewardList.value = []
    if (prizeFlag.value) {
      const res = await http.request({
        url: '/api/box/winLog_heaven',
        method: 'POST',
        data: {
          page: prizePage.value,
          limit: 10,
          id: blindboxId.value,
          case_id: caseId.value,
        },
      })
      console.log(res.data.find((e) => e.nickname == '微信用户4056'))
      if (res.data.length == 0) {
        uni.utils.toast('已经没有记录了~')
        prizeFlag.value = false
        --prizePage.value
        return
      }
      openRewardList.value = [...openRewardList.value, ...res.data]
    } else {
      // uni.utils.toast('已经没有记录了~')
      return
    }
  }

  function prizeLower() {
    ++prizePage.value
    openReward()
  }
  // 冲冲赏排行榜
  const ccRewardList = ref([])
  const ccPage = ref(1)
  const ccFlag = ref(true)
  async function ccReward() {
    if (
      blindboxDetail.value.case_info.leftover ==
      blindboxDetail.value.case_info.sum
    ) {
      return
    }
    openRewardList.value = []
    if (ccFlag.value) {
      const res = await http.request({
        url: '/api/box/ccRanking',
        method: 'POST',
        data: {
          page: ccPage.value,
          limit: 10,
          id: blindboxId.value,
          case_id: caseId.value,
        },
      })
      if (res.data.length == 0) {
        uni.utils.toast('已经没有记录了~')
        ccFlag.value = false
        --ccPage.value
        return
      }
      ccRewardList.value = [...ccRewardList.value, ...res.data]
    } else {
      // uni.utils.toast('已经没有记录了~')
      return
    }
  }

  function chongchongLower() {
    ++ccPage.value
    ccReward()
  }

  // 上一箱下一箱
  function prevent() {
    current.value = 0
    const boxindex = ref(0)
    boxchangeList.value.forEach(async (item, index) => {
      if (blindboxDetail.value.case_info.id == item.id) {
        if (index == 0) {
          if (choosenow.value == 1) {
            uni.utils.toast('已经是第一个了~')
            return
          } else {
            --choosenow.value
            await getboxList()
            let chage = JSON.parse(JSON.stringify(boxchangeList.value))
            caseId.value = chage[chage.length - 1].id
            getblindboxDetail()
          }
        } else {
          if (index != 0) {
            boxindex.value = --index
          } else {
            boxindex.value = 0
          }
          caseId.value = JSON.parse(JSON.stringify(boxchangeList.value))[
            boxindex.value
          ].id
          getblindboxDetail()
        }
      }
    })
  }

  function next() {
    current.value = 0
    const boxindex = ref(0)
    if (JSON.parse(JSON.stringify(boxchangeList.value)).length == 0) {
      uni.utils.toast('已经是最后一个了~')
    }
    boxchangeList.value.forEach(async (item, index) => {
      if (blindboxDetail.value.case_info.id == item.id) {
        if (
          index ==
          JSON.parse(JSON.stringify(boxchangeList.value)).length - 1
        ) {
          ++choosenow.value
          await getboxList()
          if (boxchangeList.value.length == 0) {
            uni.utils.toast('已经是最后一个了~')
            --choosenow.value
            return
          } else {
            boxindex.value = 0
            caseId.value = JSON.parse(JSON.stringify(boxchangeList.value))[
              boxindex.value
            ].id
            getblindboxDetail()
          }
        } else {
          boxindex.value = ++index
          caseId.value = JSON.parse(JSON.stringify(boxchangeList.value))[
            boxindex.value
          ].id
          getblindboxDetail()
        }
      }
    })
  }

  function onClickItem(e) {
    if (current.value != e.currentIndex) {
      current.value = e.currentIndex
    } else {
      return
    }
    if (e.currentIndex == 1) {
      prizePage.value = 1
      prizeFlag.value = true
      openRewardList.value = []
      openReward()
    } else if (e.currentIndex == 2) {
      ccPage.value = 1
      ccFlag.value = true
      ccRewardList.value = []
      ccReward()
    } else {
      openRewardList.value = []
      ccRewardList.value = []
    }
  }

  // 查看奖品详情
  const showmask = ref(false)
  const maskindex = ref(0)
  function goodsinfo(index) {
    showmask.value = true
    maskindex.value = index
  }
  // 关闭mask
  function closeMask() {
    showmask.value = false
  }

  // 换箱
  const boxpopup = ref()
  const boxchangeList = ref([])
  const totalBoxPage = ref(1)
  async function getboxList() {
    const res = await http.request({
      url: '/api/box/getCase',
      method: 'POST',
      data: {
        page: choosenow.value,
        limit: 20,
        id: blindboxId.value,
      },
    })
    boxchangeList.value = res.data
    totalBoxPage.value = res.maxPage
  }
  const choosenow = ref(1)
  async function changebox() {
    await getboxList()
    boxpopup.value.open('bottom')
  }
  function closepop() {
    boxpopup.value.close()
  }
  function switchbox(index) {
    choosenow.value = index
    getboxList()
  }
  // 选择箱子
  function changeTheBox(id) {
    current.value = 0
    caseId.value = id
    ccRewardList.value = []
    openRewardList.value = []
    getblindboxDetail()
    boxpopup.value.close()
  }

  // 规则
  const ruleStrings = ref('')
  async function getRules(id) {
    const res = await http.request({
      url: '/api/index/getDetails',
      method: 'POST',
      data: {
        id: id,
      },
    })
    ruleStrings.value = res.data.details
  }

  // 规则
  const rulepopup = ref()
  async function rulePOP() {
    await getRules(7)
    rulepopup.value.open('bottom')
  }

  // 支付
  const paypopup = ref()
  const paypopupBool = ref(false)
  // 没有优惠券的价格
  const paymoney = ref()
  const buyCount = ref(0)
  //有优惠券的jiage
  const realmoney = ref()
  // const agree = ref(true)
  async function payPOP(count) {
    const userCodeStore = useUsercodeStore()
    if (
      userCodeStore.usercode.token == '' ||
      userCodeStore.usercode.userId == ''
    ) {
      uni.utils.toast('为了让您有更好的体验，请先登录')
      setTimeout(() => {
        uni.navigateTo({
          url: `/pages/login/login`,
        })
      }, 2000)
      return
    }
    // if (
    // 	userCodeStore.usercode.isAddress == 0 &&
    // 	userCodeStore.usercode.token != ''
    // ) {
    // 	uni.utils.toast('为了让您有更好的体验，请先完善物流信息')
    // 	setTimeout(() => {
    // 		uni.navigateTo({
    // 			url: `/minePage/editaddress/index`,
    // 		})
    // 	}, 2000)
    // 	return
    // }
    // await getUserMoney()
    paypopup.value.open('bottom')
    paypopupBool.value = true
    paymoney.value = (blindboxDetail.value.box.price * count).toFixed(2)
    // 每次点击重新选择优惠券
    realmoney.value = paymoney.value
    couponId.value = 0
    couponname.value = ''
    buyCount.value = count
  }
  // function changeAgree() {
  //   agree.value = !agree.value
  // }
  //支付radio
  const currentradio = ref(3)
  function radioChange(evt) {
    currentradio.value = evt.detail.value
  }
  // 天选抽卡
  // 星石支付
  const haveDraw = ref([])
  // async function paytxDrawMoney() {
  //   const res = await http.request({
  //     url: '/api/boxorder/createBoxOrder_heaven',
  //     method: 'POST',
  //     data: {
  //       id: blindboxId.value,
  //       sorce: 1,
  //       num: Number(buyCount.value),
  //       pay_type: currentradio.value,
  //       coupon_id: couponId.value,
  //       case_id: caseId.value,
  //       money: paymoney.value,
  //     },
  //   })
  //   console.log(res)
  //   if (res.st == 1) {
  //     paypopup.value.close()
  //     haveDraw.value = res.data.box_goods
  //     uni.navigateTo({
  //       url: `/drawPage/txDrawCards/index?thecard=${encodeURIComponent(
  //         JSON.stringify(haveDraw.value)
  //       )}&num=${buyCount.value}&id=${blindboxId.value}&pay_type=${
  //         currentradio.value
  //       }&case_id=${caseId.value}&money=${paymoney.value}&img=${
  //         blindboxDetail.value.box.img
  //       }&name=${blindboxDetail.value.box.name}&couponid=${couponId.value}`,
  //     })
  //   } else if (res.st == -2) {
  //     namepopup.value.open('center')
  //   } else {
  //     uni.utils.toast(res.msg)
  //   }
  // }
  function payReturnFun(res) {
    // console.log(res)
    if (res.st == 1) {
      paypopup.value.close()
      paypopupBool.value = false
      toactivity(res)
    } else if (res.st == -2) {
      namepopup.value.open('center')
    } else {
      uni.utils.toast(res.msg)
    }
  }
  function toactivity(res) {
    haveDraw.value = res.data.box_goods
    uni.navigateTo({
      url: `/drawPage/txDrawCards/index?thecard=${encodeURIComponent(
        JSON.stringify(haveDraw.value)
      )}&num=${buyCount.value}&id=${blindboxId.value}&pay_type=${
        currentradio.value
      }&case_id=${caseId.value}&money=${paymoney.value}&img=${
        blindboxDetail.value.box.img
      }&name=${blindboxDetail.value.box.name}&couponid=${couponId.value}`,
    })
  }
  // 获取订单id
  function goRealName() {
    namepopup.value.close('center')
    uni.navigateTo({
      url: '/minePage/authentication/index',
    })
  }
  const namepopup = ref()
  const orderId = ref()
  // async function getId() {
  //   const res = await http.request({
  //     url: '/api/boxorder/createBoxOrder_heaven',
  //     method: 'POST',
  //     data: {
  //       id: blindboxId.value,
  //       sorce: 1,
  //       num: Number(buyCount.value),
  //       pay_type: currentradio.value,
  //       coupon_id: couponId.value,
  //       case_id: caseId.value,
  //       money: paymoney.value,
  //     },
  //   })
  //   console.log(res)
  //   if (res.st == 1) {
  //     orderId.value = res.data
  //   } else if (res.st == -2) {
  //     namepopup.value.open('center')
  //   } else {
  //     uni.utils.toast(res.msg)
  //   }
  // }
  // 微信支付
  //轮询微信支付订单状态
  const timeStatu = ref(true)
  async function askWxOrder() {
    const userCodeStore = useUsercodeStore()
    setTimeout(() => {
      timeStatu.value = false
    }, 5000)
    const res = await http.request({
      url: '/api/boxorder/getPayInfo',
      method: 'POST',
      data: {
        id: orderId.value,
        type: 1,
      },
    })
    if (res.st == 1) {
      if (res.data.status == 1) {
        haveDraw.value = res.data.box_goods
        uni.navigateTo({
          url: `/drawPage/txDrawCards/index?thecard=${encodeURIComponent(
            JSON.stringify(haveDraw.value)
          )}&num=${buyCount.value}&id=${blindboxId.value}&pay_type=${
            currentradio.value
          }&case_id=${caseId.value}&money=${paymoney.value}&img=${
            blindboxDetail.value.box.img
          }&name=${blindboxDetail.value.box.name}&couponid=${couponId.value}`,
        })
        userCodeStore.setIsTrans(1)
        paypopup.value.close()
        paypopupBool.value = false
      } else {
        uni.utils.toast(res.data.msg)
      }
    } else {
      if (timeStatu.value) {
        askWxOrder()
      } else {
        uni.utils.toast(res.msg)
      }
    }
    paying.value = 1
  }

  const paying = ref(1)
  async function payWXDraw() {
    timeStatu.value = true
    await getId()
    if (!orderId.value) {
      return
    }
    const res = await http.request({
      url: '/api/adapay/adapay/adaPayOrder',
      method: 'POST',
      data: {
        id: orderId.value,
        type: 2,
        preferential: preferential.value,
      },
    })
    // console.log(res)
    if (res.st == 1) {
      uni.navigateToMiniProgram({
        appId: res.data.expend.wx_app_id,
        path: res.data.expend.path,
        extraData: {},
        success(res) {
          // 打开成功
          paying.value = 2
        },
      })
    } else {
      uni.utils.toast('拉起支付失败，请联系客服~')
    }
  }

  //微信官方支付
  // async function payWXDraw() {
  // 	timeStatu.value = true
  // 	await getId()
  // 	if (!orderId.value) {
  // 		return
  // 	}
  // 	const res = await http.request({
  // 		url: '/api/boxorder/boxWechatPay',
  // 		method: 'POST',
  // 		data: {
  // 			id: orderId.value,
  // 		},
  // 	})
  // 	console.log(res)
  // 	if (res.st == 1) {
  // 		uni.requestPayment({
  // 			provider: 'wxpay',
  // 			timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
  // 			nonceStr: res.data.nonceStr, // 随机字符串
  // 			package: res.data.package, // 固定值
  // 			signType: res.data.signType,
  // 			paySign: res.data.paySign, // 签名，这里用的 MD5 签名
  // 			success: function (res) {
  // 				console.log('success:' + JSON.stringify(res))
  // 				if (res.errMsg == 'requestPayment:ok') {
  // 					setTimeout(() => {
  // 						console.log('zhe')
  // 						timeStatu.value = false
  // 					}, 5000)
  // 					askWxOrder()
  // 				}
  // 			},
  // 			fail: function (err) {
  // 				uni.utils.toast('支付失败')
  // 				// console.log('fail:' + JSON.stringify(err))
  // 			},
  // 		})
  // 	} else {
  // 		uni.utils.toast(res.msg)
  // 	}
  // }

  //跳转天选抽卡

  // 用户信息星石(暂时)

  // 选择优惠券
  function chooseCoupon() {
    uni.navigateTo({
      url: `/drawPage/choosecoupon/index?money=${paymoney.value}&id=${blindboxId.value}&couponid=${couponId.value}`,
    })
  }

  const showGuide = ref(true)
  const guideBG = ref('')
  const guideId = ref([1, 2, 3, 4, 5, 6, 7, 8, 9])
  const guideList = ref([])
  async function getGuideBG() {
    const res = await http.request({
      url: '/api/index/getGuidance',
      method: 'POST',
      data: {
        id: guideId.value,
      },
    })
    guideList.value = res.data
    guideBG.value = res.data[0].img
  }

  const guideIndex = ref(0)
  function nextGuide() {
    const userCodeStore = useUsercodeStore()
    ++guideIndex.value
    if (guideIndex.value > 8) {
      showGuide.value = false
      userCodeStore.setFirstTX(1)
      return
    }
    guideBG.value = guideList.value[guideIndex.value].img
  }

  const x = ref(10000)
  const y = ref(300)
  const refreshFlag = ref(true)

  function refresh() {
    if (refreshFlag.value) {
      refreshFlag.value = false
      setTimeout(() => {
        refreshFlag.value = true
      }, 3000)
      if (current.value == 1) {
        prizePage.value = 1
        prizeFlag.value = true
        openRewardList.value = []
        openReward()
      } else if (current.value == 2) {
        ccPage.value = 1
        ccFlag.value = true
        ccRewardList.value = []
        ccReward()
      } else {
        openRewardList.value = []
        ccRewardList.value = []
        getblindboxDetail()
      }
    } else {
      uni.utils.toast('慢点~我还没准备好呢')
    }
  }

  function goRule(id) {
    uni.navigateTo({
      url: `/homePage/agreement/index?id=${id}`,
    })
  }
  // /pages/home/index?pid=${user}
  onShareAppMessage(() => {
    const userCodeStore = useUsercodeStore()
    const user = userCodeStore.usercode.user
    return {
      title: `${blindboxDetail.value.box.name} | ${blindboxDetail.value.box.price}一抽 | 第${blindboxDetail.value.case_info.name}箱 | 奖池剩余${blindboxDetail.value.case_info.leftover}/${blindboxDetail.value.case_info.sum}`,
      path: `drawPage/txDraw/index?pid=${user}&id=${blindboxId.value}`,
    }
  })

  onLoad((option) => {
    const userCodeStore = useUsercodeStore()
    blindboxId.value = option.id
    if (userCodeStore.usercode.firstTX == 1 || !userCodeStore.usercode.user) {
      showGuide.value = false
    } else {
      getGuideBG()
    }
    current.value = 0
    getblindboxDetail()
    getboxList()
    // getUserMoney()
  })
  onShow(() => {
    if (paying.value == 2) {
      askWxOrder()
    }
    uni.$once('thecoupon', (data) => {
      // console.log(data)
      realmoney.value = paymoney.value
      if (data.coupon) {
        couponId.value = data.coupon.id
        couponname.value = data.coupon.title
        // 满减
        if (data.coupon.type == 1) {
          realmoney.value = (paymoney.value - data.coupon.money).toFixed(2)
        } else if (data.coupon.type == 2) {
          realmoney.value = (paymoney.value - data.coupon.money).toFixed(2)
        } else if (data.coupon.type == 3) {
          realmoney.value = (paymoney.value * data.coupon.discount).toFixed(2)
        }
      }
    })
  })
</script>

<template>
  <view
    class="guide"
    v-if="showGuide"
    :style="'background-image:url(' + guideBG + ')'"
    @click="nextGuide"
  >
  </view>
  <view class="tx-content" v-else>
    <view class="my-reward" @click="toMyReward"> </view>
    <scroll-view scroll-y="true" class="scroll-Y" style="height: 100vh">
      <view
        class="top"
        v-if="blindboxDetail"
        :style="'background-image: url(' + blindboxDetail.box.img + ')'"
      >
        <view class="rules" @click="rulePOP"> 规则 </view>
        <view class="title">
          <span>第</span>
          <span style="color: #ffda14"
            >{{ blindboxDetail.case_info.name }}/</span
          >
          <span>{{ blindboxDetail.box.case_num }}箱</span>
          <span>赏池剩余</span>
          <span style="color: #ffda14; margin-left: 12rpx"
            >：{{ blindboxDetail.case_info.leftover }}/</span
          >
          <span>{{ blindboxDetail.case_info.sum }}</span>
        </view>
        <view class="right-bottom">
          <view class="bottom-left">
            <span class="box_name" style="">
              {{ blindboxDetail.box.name }}</span
            >
            <span>￥{{ blindboxDetail.box.price + '/抽' }}</span>
          </view>
          <view class="bottom-right" @click="changebox"> </view>
        </view>
        <!--       <view class="top-content">
          <view class="left">
            <image
              style="width: 212rpx; height: 212rpx"
              :src="blindboxDetail.box.img"
              mode=""
            ></image>
          </view>
          <view class="right">
            <view class="right-top">
              {{ blindboxDetail.box.name }}
            </view>
            <view class="right-bottom">
              <view class="bottom-left">
                <text>￥</text>
                <text>{{ blindboxDetail.box.price + '/抽' }}</text>
              </view>
              <view class="bottom-right" @click="changebox"> </view>
            </view>
          </view>
        </view> -->
      </view>
      <view class="choose">
        <view class="left" @click="prevent"> 上一箱 </view>
        <view class="center">
          <view class="uni-padding-wrap uni-common-mt">
            <uni-segmented-control
              :current="current"
              :values="items"
              style-type="text"
              active-color="#3D3D3D"
              @clickItem="onClickItem"
            />
          </view>
          <view class="content">
            <view v-if="current === 0">
              <view class="content-text">
                <uni-notice-bar
                  v-if="probality.length > 6"
                  :speed="50"
                  color="#3D3D3D"
                  background-color="#fffde1"
                  scrollable
                  :text="probality"
                />
                <view class="probality-bar" v-else>
                  {{ probality }}
                </view>
                <scroll-view
                  scroll-y="true"
                  class="scroll-Y"
                  style="height: 57vh"
                >
                  <view class="goods-list" v-if="blindboxDetail">
                    <view
                      class="list-item"
                      v-for="(item, index) in blindboxDetail.goods_info"
                      :key="item.goods_name + index"
                      @click="goodsinfo(index)"
                    >
                      <view class="list-item-img">
                        <image
                          style="
                            position: absolute;
                            top: 0;
                            left: 0;
                            height: 40rpx;
                          "
                          :src="item.rule_img"
                          mode="heightFix"
                        ></image>
                        <text
                          style="
                            position: absolute;
                            top: 8rpx;
                            right: 12rpx;
                            font-size: 18rpx;
                          "
                          >{{ item.leftover + '/' + item.num }}</text
                        >
                        <image
                          style="width: 164rpx; height: 164rpx"
                          :src="item.img"
                          mode=""
                        ></image>
                        <view
                          v-if="
                            item.leftover == 0 &&
                            item.rule_id != 6 &&
                            item.rule_id != 5 &&
                            item.rule_id != 7
                          "
                          class="sale-out"
                          style=""
                        >
                          售罄
                        </view>
                        <view
                          v-if="
                            (item.rule_id == 6 ||
                              item.rule_id == 5 ||
                              item.rule_id == 7) &&
                            item.leftover == 0
                          "
                          class="sale-out"
                          style=""
                        >
                          已开奖
                        </view>
                        <view
                          class="scroll"
                          v-if="item.stage_start != 0 && item.stage_end != 0"
                        >
                          <uni-notice-bar
                            :speed="10"
                            color="#3d3d3d"
                            background-color="rgba(255, 255, 255, .1)"
                            scrollable
                            :text="`${item.stage_start}-${item.stage_end}发内随机送出`"
                          />
                        </view>
                        <view class="presale" v-if="item.goods_type == 1">
                          预售
                        </view>
                      </view>
                      <view
                        class="list-item-img-name"
                        style="
                          width: 164rpx;
                          margin-top: 12rpx;
                          font-size: 17rpx;
                          text-align: center;
                        "
                        >{{ item.goods_name }}</view
                      >
                    </view>
                  </view>
                </scroll-view>
              </view>
            </view>
            <view v-if="current === 1">
              <view class="content-text">
                <scroll-view
                  scroll-y="true"
                  class="scroll-Y"
                  style="height: 47vh"
                  @scrolltolower="prizeLower"
                >
                  <view class="prize-list">
                    <view
                      class="prize-item"
                      v-for="item in openRewardList"
                      :key="'openreward' + item.id"
                    >
                      <view class="head">
                        <image
                          style="width: 84rpx; height: 84rpx; flex-shrink: 0"
                          :src="item.himg"
                          mode=""
                        ></image>
                      </view>
                      <view class="prize-info">
                        <view class="text">
                          <view style="font-size: 24rpx">
                            {{ item.nickname.substring(0, 2) + '****' }}
                          </view>
                          <view style="font-size: 20rpx; color: #8e8d8d">
                            {{
                              parseTime(item.add_time, '{y}-{m}-{d} {h}:{i}')
                            }}
                          </view>
                        </view>
                        <view class="prize-right">
                          <image
                            :src="item.rule_img"
                            style="height: 39rpx"
                            mode="heightFix"
                          ></image>
                          <!-- <view style="text-align: right">
													{{ item.rule_name }}
												</view> -->
                          <view
                            v-if="item.rule_name != '冲冲'"
                            class="prize-name"
                            style="text-align: right"
                          >
                            {{ `NO.${item.no_get}` }}
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </scroll-view>
              </view>
            </view>
            <view v-if="current === 2">
              <view class="content-text">
                <scroll-view
                  scroll-y="true"
                  class="scroll-Y"
                  style="height: 47vh"
                  @scrolltolower="chongchongLower"
                >
                  <view class="chongchong-list">
                    <view
                      class="chongchong-item"
                      v-for="(item, index) in ccRewardList"
                      :key="cc + item.user_id"
                    >
                      <view class="index"> {{ index + 1 }}</view>
                      <view class="avatar">
                        <image
                          style="width: 76rpx; height: 76rpx"
                          :src="item.himg"
                          mode=""
                        ></image>
                      </view>
                      <view class="name">
                        <text>{{
                          item.nickname.substring(0, 2) + '****'
                        }}</text>
                        <text>{{ item.buy_num + '发' }}</text>
                      </view>
                    </view>
                  </view>
                </scroll-view>
              </view>
            </view>
          </view>
        </view>
        <view class="right" @click="next"> 下一箱 </view>
      </view>
    </scroll-view>
    <view class="tx-bottom" v-if="blindboxDetail">
      <view class="button-group" v-if="blindboxDetail.box.pattern == 2">
        <view class="button" @click="payPOP(1)">
          <view class="button-top"> 一发入魂 </view>
          <view class="button-bottom">
            ￥{{ (blindboxDetail.box.price * 1).toFixed(2) }}
          </view>
        </view>
        <view class="button" @click="payPOP(3)">
          <view class="button-top"> 三连无双 </view>
          <view class="button-bottom">
            ￥{{ (blindboxDetail.box.price * 3).toFixed(2) }}
          </view>
        </view>
        <view class="button" @click="payPOP(5)">
          <view class="button-top"> 五连绝世 </view>
          <view class="button-bottom">
            ￥{{ (blindboxDetail.box.price * 5).toFixed(2) }}
          </view>
        </view>
      </view>
      <view
        class="button-group"
        style="justify-content: center"
        v-if="blindboxDetail.box.pattern == 1"
      >
        <view class="button" @click="payPOP(1)">
          <view class="button-top"> 一发入魂 </view>
          <view class="button-bottom">
            ￥{{ (blindboxDetail.box.price * 1).toFixed(2) }}
          </view>
        </view>
      </view>
      <!-- <view class="abandon"> 未成年人禁止购买 </view> -->
    </view>
    <infomask
      v-if="showmask"
      @close-mask="closeMask"
      :maskindex="maskindex"
      :thegoods="blindboxDetail.goods_info"
      :boxId="blindboxDetail.box.id"
    ></infomask>

    <!-- 换箱弹出层 -->
    <uni-popup ref="boxpopup" type="bottom" v-if="blindboxDetail">
      <view v-if="blindboxDetail.case_info" class="buypopup-content">
        <view class="pop-top"> 选择箱子 </view>
        <view class="pop-info">
          {{
            '当前第' +
            blindboxDetail.case_info.name +
            '/' +
            blindboxDetail.box.case_num +
            '箱'
          }}
        </view>
        <view class="choose-box">
          <scroll-view class="scroll-view" scroll-x="true" scroll-left="900">
            <view
              v-for="item in totalBoxPage"
              :key="'totalboxpage' + item"
              :id="item"
              class="choose-item"
              :class="{
                'choose-item-active': choosenow == item,
              }"
              @click="switchbox(item)"
              >{{ `${item * 20 - 19}-${item * 20}箱` }}</view
            >
          </scroll-view>
        </view>

        <scroll-view scroll-y="true" class="scroll-Y" style="height: 55vh">
          <view class="box-list">
            <view
              @click="changeTheBox(item.id)"
              class="box-list-item"
              v-for="(item, index) in boxchangeList"
              :key="'boxchangelist' + item.id"
            >
              <view class="list-mask" v-if="item.leftover == 0"> 已售罄 </view>
              <view class="box-list-item-left">
                <view class="box-index">
                  {{ `第${index + choosenow * 20 - 19}箱` }}
                </view>
                <view class="sy-num">
                  {{ `剩${item.leftover}张` }}
                </view>
              </view>
              <scroll-view scroll-y="true" class="scroll-Y" style="height: 80%">
                <view class="box-list-item-right">
                  <view
                    class="right-item"
                    v-for="level in item.goods_info"
                    :key="'level' + level.rule_id"
                  >
                    <image
                      class="word"
                      :src="level.rule_img"
                      mode="heightFix"
                    ></image>
                    <text class="number">{{
                      `${level.sum_leftover}/${level.sum_num}`
                    }}</text>
                  </view>
                </view>
              </scroll-view>
              <view class="participate" v-if="item.is_cy == 1"> 已参与 </view>
            </view>
          </view>
        </scroll-view>
        <view class="pop-close" @click="closepop"></view>
      </view>
    </uni-popup>
    <!-- 规则弹出层 -->
    <uni-popup ref="rulepopup" type="bottom">
      <view class="rulepopup-content">
        <view
          class=""
          style="
            color: #3d3d3d;
            width: 100%;
            font-weight: 600;
            text-align: center;
            line-height: 128rpx;
          "
        >
          规则
        </view>
        <scroll-view scroll-y="true" style="height: 70vh">
          <view
            style="
              width: 94%;
              margin: 0 auto;
              color: #3d3d3d;
              padding-bottom: env(safe-area-inset-bottom);
            "
            class=""
          >
            <rich-text :nodes="ruleStrings"></rich-text>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
    <!-- 支付弹出层 -->
    <uni-popup ref="paypopup" type="bottom">
      <PayBox
        v-if="paypopupBool"
        :couponname="couponname"
        :createOrderUrl="createOrderUrl"
        :realmoney="realmoney"
        :paymoney="paymoney"
        :couponId="couponId"
        :case_id="caseId"
        :buyCount="buyCount"
        :blindboxId="blindboxId"
        @payReturnFun="payReturnFun"
        @chooseCoupon="chooseCoupon"
        :boxDetailInfo="boxDetailInfo"
      ></PayBox>
    </uni-popup>
    <movable-area class="movableArea">
      <movable-view
        :x="x"
        :y="y"
        direction="all"
        class="movableView"
        inertia="true"
        @click="refresh"
      >
        <image
          src="https://ojqn.wm2177.com/wechat_imgs/newdesign/refresh3.png"
          mode=""
          style="width: 110rpx; height: 110rpx"
        ></image>
      </movable-view>
    </movable-area>
    <!-- 实名制出层 -->
    <uni-popup ref="namepopup" type="center">
      <view class="namepopup-content">
        <view class="namepopup-title"> 提示 </view>
        <view class="namepopup-content-tow">
          鉴于您是平台的优质用户，为了能给您提供更好的服务体验，请先完成实名制认证。</view
        >
        <view class="namepopup-button">
          <view class="" @click="namepopup.close('center')"> 再想一下 </view>
          <view class="" @click="goRealName"> 确认实名 </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
  .container {
    /* #ifndef APP-NVUE */
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    /* #endif */
  }

  .guide {
    height: 100vh;
    background-repeat: no-repeat;
    background-size: 100%;
  }
  .my-reward {
    position: fixed;
    top: 4rpx;
    z-index: 1;
    right: 18rpx;
    width: 133rpx;
    height: 133rpx;
    background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/my-gift2.png')
      no-repeat;
    background-size: contain;
  }
  .tx-content {
    position: relative;
    height: 100vh;
    padding-top: 32rpx;
    box-sizing: border-box;
    overflow: hidden;
    background-image: linear-gradient(
      180deg,
      #f8ec8a,
      #f9ed8b,
      #ffefff 34%,
      #eaf7ff,
      #ffffff 41%
    );
    // color: white;
    color: #3d3d3d;

    .top {
      margin: 0 auto;
      width: 720rpx;
      border: 4rpx solid #ffdb1c;
      border-radius: 20rpx;
      overflow: hidden;
      // position: relative;
      // height: 402rpx;
      // // background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/top-content2.png')
      // //   no-repeat;
      // background-size: 100%;
      // border: 4rpx solid #ffdb1c;
      // border-radius: 20rpx;
      // background-size: 100%;
      // box-sizing: border-box;

      position: relative;
      height: 375rpx;
      margin-bottom: 30rpx;
      background-size: 100%;
      box-sizing: border-box;
      .rules {
        position: absolute;
        top: 36rpx;
        left: 56rpx;
        width: 63rpx;
        height: 31rpx;
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        border-radius: 6rpx;
        font-size: 22rpx;
        line-height: 31rpx;
        text-align: center;
      }

      .title {
        position: absolute;
        left: 50%;
        margin-left: -190rpx;
        top: 0rpx;
        width: 380rpx;
        height: 68rpx;
        border-radius: 0rpx 0rpx 18rpx 18rpx;
        background-color: rgba(0, 0, 0, 0.3);
        color: #ffe60f;
        line-height: 68rpx;
        text-align: center;
      }
      .bottom-left {
        display: flex;
        align-items: center;
      }
      .right-bottom {
        position: absolute;
        bottom: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 600;
        color: #fff;
        padding: 6rpx 20rpx;
        box-sizing: border-box;
        background: rgba(0, 0, 0, 0.3);
        font-size: 32rpx;
        .box_name {
          font-size: 34rpx;
          margin-right: 6rpx;
          font-style: italic;
          white-space: nowrap; /* 不换行 */
          overflow: hidden; /* 隐藏超出的内容 */
          text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
          width: 260rpx; /* 设置最大宽度以限制文本的显示长度 */
          display: inline-block;
        }
        .bottom-right {
          position: relative;
          width: 164rpx;
          height: 52rpx;
          background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/change2.png')
            no-repeat;
          background-size: 100%;
        }
      }
    }

    .choose {
      position: relative;
      width: 100%;
      display: flex;
      margin-top: 29rpx;
      color: #3d3d3d;

      .left {
        position: absolute;
        top: 0;
        left: 0;
        width: 155rpx;
        height: 66rpx;
        padding-left: 22rpx;
        box-sizing: border-box;
        background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/next_page2.png')
          no-repeat;
        background-size: 100%;
        font-size: 30rpx;
        line-height: 66rpx;
      }

      .center {
        width: 100%;

        ::v-deep .uni-padding-wrap {
          width: 100%;
          padding: 0 155rpx;
          box-sizing: border-box;

          .segmented-control__item {
            justify-content: space-between !important;
          }

          .segmented-control__text {
            width: 100%;
            font-size: 28rpx !important;
            // color: white !important;
          }
        }
      }

      .right {
        position: absolute;
        top: 0;
        right: 0;
        width: 155rpx;
        height: 66rpx;
        padding-right: 22rpx;
        box-sizing: border-box;
        background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/previous_page2.png')
          no-repeat;
        background-size: 100%;
        font-size: 30rpx;
        text-align: right;
        line-height: 66rpx;
      }

      .content {
        ::v-deep .uni-noticebar {
          height: 46rpx;
          margin-top: 18rpx;

          .uni-noticebar__content-text {
            font-size: 24rpx;
          }
        }

        .content-text {
          .probality-bar {
            height: 46rpx;
            margin-top: 18rpx;
            background-color: rgba(19, 13, 52, 1);
            font-size: 24rpx;
          }
        }

        .goods-list {
          // height: 57vh;
          display: flex;
          justify-content: space-evenly;
          flex-wrap: wrap;
          padding: 0 4rpx;
          // overflow: auto;

          .list-item {
            position: relative;
            margin-top: 19rpx;
            // margin-right: 6rpx;
            // margin-right: 8rpx;
            &:nth-child(4n) {
              margin-right: 0;
            }
            .list-item-img {
              position: relative;
              width: 177rpx;
              height: 177rpx;
              padding: 8rpx;
              margin-bottom: 15rpx;
              box-sizing: border-box;
              background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/goodslist2.png')
                no-repeat;
              background-size: contain;

              &:nth-child(4n) {
                margin-right: 0 !important;
              }
              .sale-out {
                position: absolute;
                top: 0;
                left: 0;
                width: 177rpx;
                height: 177rpx;
                background-color: rgba(0, 0, 0, 0.5);
                line-height: 177rpx;
                text-align: center;
                color: #ffe450;
                font-size: 22rpx;
              }
              .scroll {
                position: absolute;
                left: 0;
                bottom: -18rpx;
                width: 100%;
                ::v-deep .uni-noticebar {
                  height: 32rpx;
                  .uni-noticebar__content-text {
                    font-size: 18rpx;
                  }
                }
              }
              .presale {
                position: absolute;
                top: 50rpx;
                left: 0;
                width: 60rpx;
                height: 30rpx;
                background-color: rgb(0, 0, 0, 0.5);
                font-size: 16rpx;
                text-align: center;
                line-height: 30rpx;
                color: #fff;
              }
            }
            .list-item-img-name {
              display: -webkit-box;
              -webkit-line-clamp: 2; /* 限制为两行 */
              -webkit-box-orient: vertical;
              overflow: hidden; /* 隐藏超出部分 */
              text-overflow: ellipsis; /* 超出部分用省略号表示 */
              white-space: normal; /* 允许换行 */
              /* 你可能还想设置一些其他样式，比如宽度、字体大小等 */
            }

            &:last-child {
              margin-bottom: 242rpx !important;
            }
          }
        }

        .prize-list {
          // height: 61vh;
          padding-top: 22rpx;
          // overflow: auto;

          .prize-item {
            display: flex;
            align-items: center;
            padding: 24rpx 30rpx;
            padding-right: 0;
            box-sizing: border-box;
            // background: rgba(255, 255, 255, 0.5);

            &:last-child {
              margin-bottom: 242rpx;
            }

            .head {
              width: 84rpx;
              height: 84rpx;
              border-radius: 50%;
              overflow: hidden;
              margin-right: 25rpx;
              box-sizing: border-box;
            }

            .prize-info {
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 84%;

              .text {
                height: 84rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
              }

              .prize-right {
                height: 84rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-start;
                font-size: 26rpx;
                .prize-name {
                  // width: 260rpx;

                  display: -webkit-box;
                  -webkit-line-clamp: 1; /* 限制为一行 */
                  -webkit-box-orient: vertical;
                  overflow: hidden; /* 隐藏超出部分 */
                  text-overflow: ellipsis; /* 超出部分用省略号表示 */
                  white-space: normal; /* 允许换行 */
                  /* 你可能还想设置一些其他样式，比如宽度、字体大小等 */

                  font-size: 24rpx;
                  color: #3d3d3d;
                }
              }
            }
          }
        }

        .chongchong-list {
          // height: 61vh;
          // overflow: auto;
          padding-top: 10rpx;

          .chongchong-item {
            display: flex;
            align-items: center;
            height: 92rpx;
            border-radius: 6rpx;
            margin: 10rpx 30rpx;
            padding: 0 18rpx 0 35rpx;
            box-sizing: border-box;

            &:first-child {
              background: rgba(255, 218, 24, 0.5);

              .index {
                font-size: 30rpx;
              }
            }

            &:nth-child(2) {
              background: rgba(255, 111, 255, 0.5);
              .index {
                font-size: 30rpx;
              }
            }

            &:nth-child(3) {
              background: rgba(192, 133, 254, 0.5);
              .index {
                font-size: 30rpx;
              }
            }
            &:last-child {
              margin-bottom: 242rpx;
            }

            .index {
              margin-right: 24rpx;
              font-style: italic;
              font-size: 25rpx;
            }

            .avatar {
              width: 76rpx;
              height: 76rpx;
              border-radius: 50%;
              overflow: hidden;
              margin-right: 103rpx;
              flex-shrink: 0;

              image {
                flex-shrink: 0;
              }
            }

            .name {
              width: 100%;
              display: flex;
              justify-content: space-between;
              font-size: 26rpx;
            }
          }
        }
      }
    }

    .tx-bottom {
      position: fixed;
      bottom: 0;
      z-index: 99;
      height: 242rpx;
      width: 100%;
      // background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/bottom.png')
      // 	no-repeat;
      background-size: 100%;

      .button-group {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0 16rpx;
        margin-top: 67rpx;
        box-sizing: border-box;

        .button {
          width: 205rpx;
          height: 84rpx;
          padding-top: 9rpx;
          box-sizing: border-box;
          background-color: pink;
          background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/button2.png')
            no-repeat;
          background-size: 100%;
          text-align: center;
          color: #1f1f1f;
          font-weight: 800;

          &:last-child {
            background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/button-ten.png')
              no-repeat;
            background-size: 100%;
            color: #1f1f1f;
          }

          .button-top {
            font-size: 30rpx;
            line-height: 40rpx;
          }

          .button-bottom {
            font-size: 22rpx;
            line-height: 22rpx;
          }
        }
      }

      .abandon {
        width: 100%;
        margin-top: 30rpx;
        text-align: center;
        font-size: 22rpx;
        color: #3d3d3d;
      }
    }
    .buypopup-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      height: 1170rpx;
      padding: 32rpx;
      // background-color: #1a133f;
      background-image: linear-gradient(
        162deg,
        #ffe60f 3%,
        #fbf7e7 10%,
        #fff6a8 67%,
        #f7efa6 104%
      );
      box-sizing: border-box;
      .pop-top {
        // font-style: italic;
        color: #3d3d3d;
        // text-shadow: 2px 2px 2px #9E77F6;
        font-size: 45rpx;
        text-align: center;
      }
      .pop-info {
        margin-top: 22rpx;
        font-size: 24rpx;
      }
      .choose-box {
        height: 62rpx;
        width: 100%;
        margin-top: 48rpx;
        margin-bottom: 32rpx;
        color: #3d3d3d;
        .scroll-view {
          height: 100%;
          white-space: nowrap;
          .choose-item {
            display: inline-block;
            width: 168rpx;
            height: 100%;
            background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/odds-second2.png')
              no-repeat;
            background-size: 100%;
            flex-shrink: 0;
            font-size: 25rpx;
            text-align: center;
            line-height: 62rpx;
          }
          .choose-item-active {
            background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/odds-first2.png')
              no-repeat !important;
            background-size: contain !important;
          }
        }
      }
      .box-list {
        width: 100%;
        .box-list-item {
          position: relative;
          position: relative;
          display: flex;
          align-items: center;
          width: 100%;
          height: 225rpx;
          border: 1px solid rgba(255, 255, 255, 0.24);
          padding-left: 6rpx;
          margin: 34rpx 0;
          box-sizing: border-box;
          .participate {
            position: absolute;
            top: 0;
            left: 0;
            width: 110rpx;
            height: 44rpx;
            // background-color: #ffb400;
            border: 4rpx solid #ffb300;
            background-image: linear-gradient(180deg, #ffd80a, #ffef8e);
            border-radius: 0 22rpx 22rpx 0;
            font-size: 24rpx;
            line-height: 44rpx;
            text-align: center;
          }
          .list-mask {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            width: 100%;
            height: 100%;
            background-color: rgba(26, 19, 63, 0.8);
            // z-index: 99;
            line-height: 225rpx;
            text-align: center;
          }
          .box-list-item-left {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 205rpx;
            height: 177rpx;
            margin-right: 20rpx;
            background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/list-back2.png')
              no-repeat;
            background-size: 100%;
            flex-shrink: 0;
            font-size: 20rpx;
            text-align: center;
            .box-index {
              width: 148rpx;
              height: 52rpx;
              margin: 60rpx 0 11rpx 12rpx;
              background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/box-index2.png')
                no-repeat;
              background-size: contain;
              font-size: 26rpx;
              line-height: 52rpx;
            }
          }
          .box-list-item-right {
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            // height: 100%;
            // overflow: auto;
            align-items: center;
            .right-item {
              display: flex;
              align-items: flex-end;
              margin-right: 30rpx;
              margin-bottom: 28rpx;
              &:nth-child(4n) {
                margin-right: 0;
              }
              .word {
                display: inline-block;
                // width: 38rpx;
                height: 38rpx;
                margin-right: 17rpx;
                text-align: center;
                font-size: 49rpx;
              }
              .number {
                font-size: 22rpx;
              }
            }
          }
        }
      }
      .pop-close {
        position: absolute;
        top: 32rpx;
        right: 32rpx;
        width: 63rpx;
        height: 57rpx;
        background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/close.png')
          no-repeat;
        background-size: 100%;
      }
    }
    .rulepopup-content {
      height: 1117rpx;
      background-image: linear-gradient(
        162deg,
        #ffe60f 3%,
        #fbf7e7 10%,
        #fff6a8 67%,
        #f7efa6 104%
      );
      color: #3d3d3d;
    }
  }
  .movableArea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
  }
  .movableView {
    pointer-events: auto;
    width: 140rpx;
    height: 140rpx;
    // padding: 10rpx;
    border-radius: 100%;
    // border: 2px solid #33a3dc;
    // background-color: #daee78;
    // z-index: 999;
  }
  .namepopup-content {
    width: 600rpx;
    height: 404rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    border-radius: 36rpx;
    background-color: #fff;
    .namepopup-title {
      height: 114rpx;
      border-bottom: 1px solid #d8d8d8;
      text-align: center;
      font-size: 40rpx;
      line-height: 114rpx;
      color: black;
    }
    .namepopup-content-tow {
      height: 164rpx;
      padding-top: 32rpx;
      box-sizing: border-box;
      text-align: center;
      font-size: 28rpx;
      color: #9b9b9d;
    }
    .namepopup-button {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: white;
      // margin-top: 26rpx;
      view {
        width: 234rpx;
        height: 80rpx;
        background-color: $all-color;
        border-radius: 40rpx;
        text-align: center;
        font-size: 26rpx;
        font-weight: 700;
        line-height: 80rpx;
        &:first-child {
          border: 2rpx solid $all-color;
          background-color: #fff;
          color: $all-color;
        }
      }
    }
  }
</style>
